interface Hero {
  id: string;
  name: string;
}

/**
 * @ngComponent <hero-detail-component>
 * @returns
 */
export const heroDetail: angular.IComponentOptions = {
  bindings: {
    hero: "<",
    deleted: "&",
  },
  template: `
    <h2>{{$ctrl.hero.name}} details!</h2>
    <div><label>id: </label>{{$ctrl.hero.id}}</div>
    <button type="button" ng-click="$ctrl.onDelete()">Delete</button>
  `,
  controller: class HeroDetailController {
    static $inject = [] as string[];

    declare hero: Hero;

    declare deleted: (hero: Hero) => void;

    onDelete() {
      this.deleted(this.hero);
    }
  },
};

export default function (__App__: ng.IModule) {
  __App__.component("heroDetailComponent", heroDetail);
}
